<template>
  <div>
    <van-row @click="openModel">
      <van-col span="6">
        <van-image :src="avatarSrc" alt=""
          fit="cover" round
        />
      </van-col>
      <van-col span="16" style="text-align: 'left'">{{ nickname }}</van-col>
      <van-col span="2">
        <van-icon name="arrow" />
      </van-col>
    </van-row>
    <van-grid>
      <van-grid-item style="background-color: #c0c0c0" icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
    </van-grid>
    <!-- 登录-表单验证 -->
    <transition name="van-fade">
      <div class="login-model" v-if="isShowModel">
        <div class="login-bg" @click="isShowModel = !isShowModel"></div>
        <van-form @submit="onSubmit">
          <div class="model-head" style="margin: 16px;">
            <p>用户登录</p>
          </div>
          <van-field
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">提交</van-button>
          </div>
        </van-form>
      </div>
    </transition>
  </div>
</template>

<script>
import { GoLogin } from '@/utils/api.js'
export default {
  name: 'User',
  components: {},
  props: [],
  data () {
    return {
      avatarSrc: 'https://img01.yzcdn.cn/vant/cat.jpeg', // *用户头像(这里给个默认值)
      username: '', // *用户登录：用户名
      password: '', // *用户登录：密码
      isShowModel: false, // *登录界面判断 flag
      nickname: '用户登录', // *用户昵称
      token: '' // *用户登录 token
    }
  },
  computed: {},
  created () {
    // ? 组件创建时需要判断用户是否已经登录
    this.token = localStorage.getItem('token') ? localStorage.getItem('token') : '' // * token 赋值操作
    // * 方法：从 localStorage 中查看是否有 token/userInfo 的值
    if (this.token) { // 判断用户是否登录
      // * 表示已经登录，此时需要从 localStorage 中获取用户信息
      // ? 由于 localStorage 里面保存的是字符串，userInfo 需要获取的是对象形式
      const userInfo = JSON.parse(localStorage.getItem('userInfo'))
      this.nickname = userInfo.nickname
      this.avatarSrc = userInfo.avatar
    }
  },
  mounted () {},
  watch: {},
  methods: {
    onSubmit (values) {
      // console.log('submit', values) // *vallues 回传的参数格式字段名是中文的：密码 + 用户名
      const username = values['用户名']
      const pwd = values['密码'] // 接口参数为 pwd
      GoLogin({ username, pwd })
        .then(response => {
          if (response.errno === 0) { // 登录成功
            // console.log(response)
            // ? 登录逻辑顺序：
            // * 1、提示框提示登录成功
            this.$toast.success('登录成功')
            // * 2、把获取的 token 值存储到本地 localStorage
            localStorage.setItem('token', response.data.token)
            this.token = response.data.token // 给变量 token 赋值，方便操作
            // ? 由于 userInfo 是一个对象，localStorage 保存的只能是字符串，所有要进行转换
            localStorage.setItem('userInfo', JSON.stringify(response.data.userInfo))
            // * 3、退出登录窗口(做一个动画退出避免显得突兀)
            setTimeout(() => {
              // ? 这里使用的是箭头函数，this 指向函数外层
              this.isShowModel = !this.isShowModel
              // * 4、把获取的 userInfo 用户信息，填写到页面上显示
              this.nickname = response.data.userInfo.nickname
              this.avatarSrc = response.data.userInfo.avatar
            }, 500)
          }
        })
    },
    openModel () { // 登录界面打开事件
      // ! 需要判断用户是否登录，如果登录直接就 return，没有就打开登录界面 -> isShowModel 取反
      if (this.token) {
        return // *如果有 token，则直接返回，不打开登录界面
      }
      this.isShowModel = !this.isShowModel
    }
  }
}
</script>

<style scoped lang='less' >
.van-row{
  padding: .24rem 4%;
  background-color: #191E28;
  color: #ffffff;
  font-size: .5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  .van-image{
    display: block;
    height: 1.5rem;
    width: 1.5rem;
  }
  :nth-child(2){
    text-align: left;
  }
  :nth-child(3){
    text-align: right;
  }
}
.van-grid{
  .van-grid-item__content{
    background-color: #939597;
    color: #ffffff;
  }
  span{
    color: #ffffff;
  }
}
.login-model{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
  .login-bg{
    height: 100%;
    background-color:rgba(0, 0, 0, .7);
  }
  .van-form{
    border-radius: 20px;
    width: 90%;
    background-color: #939597;
    position: absolute;
    left: 50%;
    top: 35%;
    margin-left: -45%;
    .model-head{
      font-size: .81rem;
      color: #cfcfcf;
    }
  }
}
</style>
